<template>
    <div class="popover_user">
        <div class="popover_user_info">
            <img :src="contact.avatar" alt="" class="popover_user_avatar">
            <div class="popover_user_other">
                <div class="popover_user_name">{{ contact.displayName }}</div>
                <div class="popover_user_view">ID：{{ contact.id }}</div>
            </div>
            <el-popover placement="right" trigger="hover">
                <div class="popover_group_more">
                    <div class="popover_more_item" @click="dialogShow">
                        {{ $t('msg.群聊名称') }}
                    </div>
                    <div class="popover_more_item popover_more_active" @click="removeGroup" v-if="isSelf">
                        {{ $t('msg.解散群组') }}</div>
                    <div class="popover_more_item popover_more_active" @click="removeUser" v-else>
                        {{ $t('msg.退出群聊') }}
                    </div>
                </div>
                <div slot="reference" class="popover_more_btn">
                    <img src="@/assets/image/more_dot.png" alt="">
                </div>
            </el-popover>
        </div>

        <div class="popover_item">
            <div class="popover_item_key">{{ $t('msg.群主') }}</div>
            <div class="popover_item_value">{{ owner_name }}</div>
        </div>
        <div class="popover_item">
            <div class="popover_item_key">{{ $t('msg.添加时间') }}</div>
            <div class="popover_item_value">{{ create_time }}</div>
        </div>
        <div class="popover_send" @click="send_msg">
            <img src="@/assets/image/msg.png" alt="">
            <span>{{ $t('msg.发消息') }}</span>
        </div>

        <el-dialog :title="$t('msg.群聊名称')" :visible="dialogBoolen" top="100px" :modal="true" :center="true"
            width="430px" :show-close="false" append-to-body>
            <editGroupName :id="contact.id" :remarkName="remarkName" @close="dialogBoolen = false" @ok="ok_click" />
        </el-dialog>
    </div>
</template>

<script>
import { mapState } from "vuex";
import editGroupName from "@/components/contacts/editGroupName.vue"
export default {
    components: {
        editGroupName
    },
    props: {
        contact: {
            type: Object,
            default: () => { }
        }
    },
    computed: {
        ...mapState({
            user: state => state.user
        }),
    },
    data() {
        return {
            dialogBoolen: false,
            remarkName: "",

            owner_name: "",
            create_time: "",
            isSelf: false
        }
    },
    watch: {
        contact: {
            handler(v, n) {
                this.getUserInfo();
            },
            immediate: true
        }
    },

    methods: {
        getUserInfo() {
            this.$api.imApi.getGroupInfoAPI({
                group_id: this.contact.id
            }).then((res) => {
                if (res.code != 0) return;

                let data = res.data;
                this.owner_name = data.userInfo.displayName
                this.create_time = data.create_time;
                this.isSelf = data.owner_id == this.user.im_user_id;
                this.remarkName = data.displayName;
            })
        },

        // 解散群
        removeGroup() {
            this.$confirm(this.$t('msg.确定解散群聊吗'), this.$t('msg.提示'), {
                confirmButtonText: this.$t('live.确定'),
                cancelButtonText: this.$t('chat.取消'),
                type: "warning"
            }).then(() => {
                this.$api.msgApi.removeGrouprAPI({
                    id: this.contact.id
                }).then((res) => {
                    if (res.code == 0) {
                        this.$message({
                            type: "success",
                            message: this.$t('msg.解散成功')
                        });
                        setTimeout(() => this.$emit('ok'), 1500);
                    }
                })
            }).catch(() => { });
        },
        //退出群
        removeUser() {
            this.$confirm(this.$t('msg.确定退出群聊吗'), this.$t('msg.提示'), {
                confirmButtonText: this.$t('live.确定'),
                cancelButtonText: this.$t('chat.取消'),
                type: "warning"
            }).then(() => {
                console.log(111)
                this.$api.imApi.removeUserAPI({
                    id: this.contact.id,
                    user_id: this.userInfo.im_user_id
                }).then(res => {
                    if (res.code == 0) {
                        this.$message({
                            type: "success",
                            message: this.$t('msg.退出成功')
                        });
                        setTimeout(() => this.$emit('ok'), 1500);
                    }
                });
            }).catch(() => { });
        },
        ok_click() {
            this.getUserInfo();
            this.dialogBoolen = false;
            this.$emit('ok');
        },
        send_msg() {
            this.$store.commit('changeChatUser', this.contact);
            setTimeout(() => {
                this.$router.replace({
                    name: 'message'
                })
            }, 100)
        },
        dialogShow() {
            if (!this.isSelf) {
                this.$message({
                    type: "warning",
                    message: this.$t("msg.当前群聊仅群主可以修改群名称")
                });
            } else {
                this.dialogBoolen = true;
            }
        }
    }
}
</script>


<style lang="scss">
.popover_user {
    width: 260px;
    height: 360px;
    padding: 12px;
    box-sizing: border-box;

    &_info {
        display: flex;
        justify-content: space-between;
        padding-bottom: 16px;
        border-bottom: 1px solid #EDEDED;
    }

    &_avatar {
        width: 52px;
        height: 52px;
        border-radius: 4px 4px 4px 4px;
    }

    &_other {
        padding-left: 12px;
        box-sizing: border-box;
    }

    &_name {
        height: 25px;
        line-height: 25px;
        font-size: 18px;
        color: #333333;
    }

    &_view {
        height: 17px;
        line-height: 17px;
        font-size: 12px;
        color: #7F7F7F;
    }



    .popover_item {
        height: 52px;
        border-bottom: 1px solid #EDEDED;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;

        &_key {
            font-size: 14px;
            color: #7F7F7F;
        }

        &_value {
            font-size: 14px;
            color: #333333;
        }
    }

    .popover_send {
        padding-top: 80px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 19px;
            height: 19px;
        }

        span {
            font-size: 14px;
            color: #2273FF;
            margin-left: 4px;
        }
    }
}

.popover_group_more {
    .popover_more_item {
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 14px;
        color: #333333;
        cursor: default;

        &.popover_more_active {
            color: #FF4C4C;
        }

        &:hover {
            background: #EDEDED;
        }
    }
}

.popover_more_btn {
    img {
        width: 24px;
        height: 24px;
        border-radius: 2px 2px 2px 2px;
    }
}
</style>